<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gray-50 text-gray-800">
    <div class="text-center p-8 max-w-md mx-auto bg-white rounded-lg shadow-lg">
      <div class="text-9xl font-bold text-gray-200 mb-4">404</div>
      <h1 class="text-3xl font-bold mb-2">页面不存在</h1>
      <p class="text-gray-600 mb-6">抱歉，您访问的页面不存在或已被删除</p>
      <button @click="goHome" class="px-6 py-3 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        返回首页
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goHome = () => {
  router.push('/index')
}
</script>

<style scoped>
/* 可以添加一些自定义样式，但主要样式已经通过 tailwindcss 实现 */
</style>